<!DOCTYPE html>
<html lang="en">

<head>
    <title>练习</title>
    <script src="../js/vue.js"></script>

</head>

<body>
    <div id="app">
        {{message}}
        <table border="2px">
            <tr>
                <td>用户名</td>
                <td><input type="text" name="" v-model="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="" v-model="password"></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" name="" v-model="verifypwd"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    男<input type="radio" name="sex" value="男" v-model="sex">
                    女<input type="radio" name="sex" value="女" v-model="sex">
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    篮球<input type="checkbox" name="habbit" value="篮球" v-model="like">
                    足球<input type="checkbox" name="habbit" value="足球" v-model="like">
                    乒乓球<input type="checkbox" name="habbit" value="乒乓球" v-model="like">
                </td>
            </tr>
            <tr>
                <td>所在城市</td>
                <td>
                    <select name="" id="" v-model="city">
                        <option value="1">北京</option>
                        <option value="2">广州</option>
                        <option value="3">上海</option>
                        <option value="4">深圳</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>个人简介</td>
                <td>
                    <textarea name="" id="" v-model="desc"></textarea>
                </td>
            </tr>
        </table>
        <button v-on:click="register">注册</button>
    </div>

</body>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hellow',
            username: '',
            password: '',
            verifypwd: '',  //确认密码
            sex: '',       //性别
            city: '',    //城市
            like: [],   // 爱好
            desc: ''    //描述
        },
        methods: {
            register: function () {
                //this 表示当前的vue实例
                // 使用vue中的data变量的时候 使用this.变量名
                alert(this.username + this.password + this.verifypwd + this.sex + this.city + this.like + this.desc)
            }
        }
    })

</script>

</html>